<template>
    <div class="content-wrapper-view">
        <div class="menu-wrapper">
            <el-row>
                <el-col :span="5" class="tree-box">
                    <div class="tree-box-header">
                        <el-tag size="mini">在线人数：{{userList?userList.length:0}}</el-tag>
                    </div>
                    <div class="tree-box-body">
                        <el-table
                            height="550"
                            :data="userList"
                            border fit
                            highlight-current-row
                            v-loading="listLoading"
                            element-loading-text="给我一点时间"
                            @selection-change="handleSelectionChange">

                            <el-table-column type="selection" width="50" align="center"></el-table-column>
                            <el-table-column label="姓名" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.realName}}
                                </template>
                            </el-table-column>

                            <el-table-column label="账号" align="center">
                                <template slot-scope="scope"> {{scope.row.account}}</template>
                            </el-table-column>
                            
                        </el-table>
                    </div>
                </el-col>

                <el-col :span="19" class="content-box">
                    
                    <el-row>
                        <el-col>
                            <div class="detail-wrapper">
                                <el-tabs v-model="activeName">
                                    <el-tab-pane label="全员广播" name="first">

                                        <el-form :model="allUserMsg" ref="allUserMsg" :rules="allUserMsgRules">
                                            <el-form-item prop="message">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 6, maxRows: 1}"
                                                        placeholder="请输入内容"
                                                        v-model="allUserMsg.message">
                                                </el-input>
                                            </el-form-item>
                                        </el-form>
                                        <el-button style="margin-bottom: 10px;" type="primary" @click="handlerSendNotification">发 送</el-button>
                                        
                                    </el-tab-pane>

                                    <el-tab-pane label="多用户消息" name="second">

                                        <div class="toUsers">
                                            <template v-if="multipleSelection.length > 0">
                                                <el-tag v-for="(item, index) in multipleSelection" size="mini" closable class="name-tag" :key="index">{{item.realName}}</el-tag>
                                            </template>
                                            <template v-else>
                                                <el-alert show-icon title="请选择用户" type="warning" :closable="false"></el-alert>
                                            </template>
                                        </div>

                                        <el-form :model="toUserMsg" ref="toUserMsg" :rules="toUserMsgRules">
                                            <el-form-item prop="message">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 6, maxRows: 1}"
                                                        placeholder="请输入内容"
                                                        v-model="toUserMsg.message">
                                                </el-input>
                                            </el-form-item>
                                        </el-form>
                                        
                                        <el-button style="margin-bottom: 10px;" type="primary" @click="handlerMessageToUser">发 送</el-button>

                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
import {notification, toUser} from '@/api/system/websocket'
import {onlineUsers} from '@/api/system/online'
import { ResultMessage } from '@/libs/response'
import { mapGetters } from 'vuex'
import valid from "@/libs/rules";

export default {
    name: "OnlineUser",
    data() {
        let required = valid.required();
        return {
            activeName: 'first',
            userList: null,
            selectedUsers: null,
            listLoading: false,
            multipleSelection: [],

            //全员广播消息
            allUserMsg: {
                type: 'broadcast', 
                mode: 'Notification', 
                from: null, 
                to: null, 
                title: '系统消息', 
                message: '系统将在【10】分钟重启，请注意保存！'
            },
            allUserMsgRules: {
                message: [required]
            },

            //发送消息给指定用户
            toUserMsg: {
                type: 'broadcast', 
                mode: 'Notification', 
                from: null, 
                to: null, 
                title: '系统消息', 
                message: null
            },
            toUserMsgRules: {
                message: [required]
            }
        };
    },
    computed: {
        ...mapGetters(['user'])
    },
    created() {
        this.getOnlineUsers()
    },
    methods: {
        handleSelectionChange(val) {//多选
            this.multipleSelection = val;
        },

        //获取当前在线用户
        getOnlineUsers() {
            onlineUsers().then(response => {
                if(ResultMessage(response, false)) {
                    this.userList = response.data.data
                }
            }).catch(error => {
                this.$notify({
                    title: '提示', message: '获取当前在线用户失败',
                    type: 'error', duration: 2000
                })
            })
        },
        
        //全员广播消息
        handlerSendNotification() {
            this.$refs['allUserMsg'].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要发送？', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', lockScroll: true
                    }).then(() => {
                        notification(this.allUserMsg).then(response => {
                            ResultMessage(response)
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '删除失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }).catch(() => {})
                }
            })
        },

        //发送消息给指定用户
        handlerMessageToUser() {
            let users = []
            if(this.multipleSelection.length > 0) {
                for(let item of this.multipleSelection) {
                    users.push(item.userId)
                }
            }
            if(users.length > 0) {
                this.toUserMsg.from = this.user.id
                this.toUserMsg.to = users.join(',')

                this.$refs['toUserMsg'].validate((valid) => {
                    if (valid) {
                        this.$confirm('确定要发送？', '提示', {
                            confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', lockScroll: true
                        }).then(() => {
                            toUser(this.toUserMsg).then(response => {
                                ResultMessage(response)
                            }).catch(error => {
                                this.$notify({
                                    title: '提示', message: '消息发送失败',
                                    type: 'error', duration: 2000
                                })
                            })
                        }).catch(() => {})
                    }
                })

            } else {
                this.$notify({
                    title: '提示', message: '请选择用户',
                    type: 'error', duration: 2000
                })
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.el-tabs__item{
    height: 41px;
}
.el-tabs__nav-wrap::after{
    height: 1px;
}
</style>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
.el-tabs__nav-wrap::after{
    height: 10px;
}
.menu-wrapper {
    border: 1px solid #e9eaec;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    &:hover {
        border-color: #eee;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }
    .tree-box {
        &-header {
            padding-left: 10px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #dcdcdc;
            border-right: 1px solid #dcdcdc;
        }
        &-body {
            padding: 15px 10px 10px 10px;
            border-right: 1px solid #dcdcdc;
        }
    }

    .content-box {
        
        .btn-wrapper {
            padding-left: 10px;
            line-height: 50px;
            border-bottom: 1px solid #dcdcdc;
        }

        .detail-wrapper {
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;

            .toUsers{
                margin-bottom: 10px;
                .name-tag{
                    margin-right: 10px;
                }
            }
        }

        .permission-wrapper {
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
}
</style>